<style type="text/css">
    .hide{display: none;}
    #city-box,#area-box{margin-top: 10px;}
    .clear{clear: both;height: 1px;width: 100%;}
</style>
<script>
    var baseUrl = "<?php echo $baseUrl; ?>?t=1";
</script>

<div class="layui-row search-row" id="search-box">
    <div class="item">
        <div class="row" style="">
            <div class="box">
                <span class="title">首字母：</span>
                <div data-key="firstchar" data-type="list" class="search-key list" >
                    <ul>
                        <?php foreach ($allFirstchar as $key => $value) { ?>
                        <li><span data-value="<?php echo $value; ?>"><?php echo $value; ?></span></li>
                        <?php } ?>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="item">
        <div class="row">
            <div class="box">
                <span class="title">省级：</span>
                <div data-key="province" data-type="list" class="search-key list" >
                    <ul>
                        <?php foreach ($allProvince as $key => $value) { ?>
                        <li><span data-value="<?php echo $value['serial_number']; ?>"><?php echo $value['name']; ?></span></li>
                        <?php } ?>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="item">
        <div class="row">
            <div class="box">
                <span class="title">是否热门：</span>
                <div data-key="is_hot" data-type="list" class="search-key list" >
                    <ul>
                        <li><span data-value="1">是</span></li>
                        <li><span data-value="2">否</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="row" style="width: 360px;">
            <div class="box">
                <span class="title">关键字查询：</span>
                <div data-key="key" data-type="txt" class="search-key txt">
                    <input type="text" value="" placeholder="地区名称/所属地区/简称"/>
                </div>
            </div>
        </div>
        <div class="row" style="width: 460px;">
            <div class="btn">
                <button class="layui-btn layui-btn-sm btn-query">查询</button>

                <?php if(Cm::$app->limitPost('/platform/site/area','save')){ ?>
                <a href="javascript:void(0)" class="layui-btn layui-btn-sm layui-btn-normal" onclick="app.edit.add()">开通城市</a> 
                <?php } ?>
            </div>
        </div>
    </div>
</div>
<table data-url="<?php echo $baseUrl; ?>?action=list"
       data-search="#search-box"
       data-page=""
       data-height="full-370"
       id="data-list"
       lay-filter='data-list' style="display: none;">
    <thead>
    <tr>
        <th width="100" align="center" field="code">编号</th>
        <th width="120" field="name">地区名称</th>
        <th width="120" field="serial_number">编码</th>
        <th width="100" field="full_name">地区全称</th>
        <th width="130" align="center" field="lastname">所属上级</th>
        <th width="90" align="center" field="short_pinyin">地区简拼</th>
        <th width="100" field="full_pinyin">地区全拼</th>
        <th width="80" align="center" field="firstchar">首字母</th>
        <th width="100" align="center" templet="#tpl-level">类型</th>
        <th width="100" align="center" templet="#tpl-hot">是否热门</th>
        <th minWidth="160" toolbar="#tpl-cmd">操作</th>
    </tr>
    </thead>
</table>
<script type="text/html" id="tpl-level">
    {{# if(d.level==1){}}
    <span>省/直辖市</span>
    {{# }else if(d.level==2){ }}
    <span>市/直辖区</span>
    {{# }else{}}
    <span>区县</span>
    {{# }}}
</script>

<script type="text/html" id="tpl-hot">
    {{# if(d.is_hot==1){ }}
    <span style="color: red;"><i class="layui-icon layui-icon-fire"></i></span>
    {{# } }}
</script>

<script type="text/html" id="tpl-cmd">
    <?php if(Cm::$app->limitPost('/platform/site/area','info')){ ?>
        <button onclick="app.edit.update(this)" class="layui-btn layui-btn-xs">编辑</button>
    <?php } ?>    
    <?php if(Cm::$app->limitPost('/platform/site/area','del')){ ?>
        <button onclick="app.del({{d.id}})" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
    <?php } ?>        
    <span style="display: none;">{{JSON.stringify(d)}}</span>
</script>

<script type="text/html" id="tpl-edit">
    <div class="layui-card" style="box-shadow: none;">
        <div class="layui-card-header">{{id>0?'编辑城市':'新增城市'}}</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">选择地区</label>
                    <div class="layui-input-block">
                        <select lay-filter="province" lay-search id="province">
                            <option value="">请选择</option>
                            <?php foreach ($allArea as $key => $value) { ?>
                                <option value="<?php echo $value['serial_number'] ?>" data-id="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></option>
                            <?php } ?>
                        </select>   
                    </div>
                    <div class="layui-input-block hide" id="city-box">
                        
                    </div>
                    <div class="layui-input-block hide" id="area-box">
                        
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">地区名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" value="{{name}}" lay-verify="required"  autocomplete="off" placeholder="请输入地区名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">地区全称</label>
                    <div class="layui-input-block">
                        <input type="text" name="full_name" id="full_name" value="{{full_name}}" lay-verify="required"  autocomplete="off" placeholder="请输入地区全称" class="layui-input">
                    </div>
                </div>         

                <div class="layui-form-item">
                    <label class="layui-form-label">编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="serial_number" id="serial_number" value="{{serial_number}}" lay-verify="required"  autocomplete="off" placeholder="请输入编码" class="layui-input">
                        <input type="hidden" name="code" id="code" value="{{code}}">
                    </div>
                </div>   

                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <select lay-filter="level" id="level">
                            <option value="0">请选择</option>
                            <option value="1">省/直辖市</option>
                            <option value="2">市/直辖区</option>
                            <option value="3">区/县</option>
                        </select>   
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">地区简拼</label>
                    <div class="layui-input-block">
                        <input type="text" name="short_pinyin" id="short_pinyin" value="{{short_pinyin}}" lay-verify="required"  autocomplete="off" placeholder="请输入地区拼音" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">地区全拼</label>
                    <div class="layui-input-block">
                        <input type="text" name="full_pinyin" id="full_pinyin" value="{{full_pinyin}}" lay-verify="required"  autocomplete="off" placeholder="请输入地区全拼" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">首字母</label>
                    <div class="layui-input-block">
                        <input type="text" name="firstchar" id="firstchar" value="{{firstchar}}" lay-verify="required|firstchar"  autocomplete="off" placeholder="请输入地区全拼" class="layui-input">
                    </div>
                </div> 

                <div class="layui-form-item">
                    <label class="layui-form-label">是否热门</label>
                    <div class="layui-input-block">
                        <input type="checkbox" lay-filter="is_hot" name="is_hot" lay-skin="switch" lay-text="ON|OFF" {{is_hot==1?'checked':''}}>
                    </div>
                </div>      

                <?php if(Cm::$app->limitPost('/platform/site/area','save')){ ?>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="*">保存</button>
                    </div>
                </div>
                <?php } ?>
            </form>
        </div>
    </div>
</script>

<script type="text/html" id="tpl-area">
    <select lay-filter="{{type}}" lay-search id="{{type}}">
        <option value="">请选择</option>
        {{each item.data as value}}
            <option value="{{value.serial_number}}" data-id="{{value.id}}">{{value.name}}</option>
        {{/each}}
    </select> 
</script>

<script>
    var app = {
        allArea:'<?php echo json_encode($allArea); ?>',
        city:[],
        area:[],
        init: function () {
            $('#data-list').table();
            this.form.init();
        },
        edit: {
            data:null,
            load: function () {

                layer.open({
                    title:false,
                    area:['430px','650px'],
                    type:1,
                    content:template('tpl-edit', this.data)
                });
                if(app.edit.data.area_id != 0){
                    var parentpath = app.edit.data.parentpath.split(',');
                    var json= eval('('+app.allArea+')');
                    for(var i in parentpath){
                        if(i == 0){
                            $("#province").val(parentpath[0]);  
                            app.city = json[parentpath[0]];
                        }
                        if(i == 1){
                            app.area = app.city.data[parentpath[1]];
                            $("#city-box").html(template('tpl-area', {item:app.city,type:'city'}));
                            app.form.render();
                            $("#city-box").show();
                            $("#city").val(parentpath[1]); 
                        }
                        if(i == 2){
                            $("#area-box").html(template('tpl-area', {item:app.area,type:'area'}));
                            app.form.render();
                            $("#area-box").show();
                            $("#area").val(parentpath[2]); 
                        }
                    }
                }

                if(app.edit.data.level != 0){
                    $("#level").val(app.edit.data.level);
                }

                app.form.render();
            },
            add: function () {
                this.data={
                    id:0,
                    name:'',
                    serial_number:'',
                    area_id:0,
                    code:'',
                    province:'',
                    city:'',
                    full_name:'',
                    short_pinyin:'',
                    full_pinyin:'',
                    firstchar:'',
                    parentpath:'',
                    level:0,
                    is_hot:0
                };
                this.load();
            },
            update: function (e) {
                var str=$(e).parent().find('span').html();
                var json=eval('('+str+')');
                this.data={
                    id:json.id,
                    name:json.name,
                    serial_number:json.serial_number,
                    area_id:json.area_id,
                    code:json.code,
                    province:json.province,
                    city:json.city,
                    full_name:json.full_name,
                    short_pinyin:json.short_pinyin,
                    full_pinyin:json.full_pinyin,
                    firstchar:json.firstchar,
                    parentpath:json.parentpath,
                    is_hot:json.is_hot,
                    level:json.level
                };

                this.load();
            }
        },
        form: {
            obj: null,
            init: function () {
                var form = layui.form;
                form.verify({
                    firstchar: [
                        /^[A-Z]$/
                        , '请填写一个大写字母！'
                    ]
                });
                form.render();

                form.verify({
                    
                });

                form.on('select(province)', function (data) {
                    $("#city-box").hide();
                    $("#area-box").hide();
                    if(data.value == ""){
                        app.edit.data.area_id = 0;
                        return false;
                    }
                    app.edit.data.area_id = $(data.elem).find("option[value='"+data.value+"']").attr('data-id');
                    var json= eval('('+app.allArea+')');
                    app.city = json[data.value];
                    if(app.city.data != ""){
                        $("#city-box").html(template('tpl-area', {item:app.city,type:'city'}));
                        $("#city-box").show();
                        app.edit.data.area_id = 0;
                    }else{
                        app.form.changeData(app.city);
                    }
                    app.form.render();
                });

                form.on('select(city)', function (data) {
                    $("#area-box").hide();
                    if(data.value == ""){
                        app.edit.data.area_id = 0;
                        return false;
                    }
                    app.edit.data.area_id = $(data.elem).find("option[value='"+data.value+"']").attr('data-id');
                    app.area = app.city.data[data.value];
                    if(app.area.data != ""){
                        $("#area-box").html(template('tpl-area', {item:app.area,type:'area'}));
                        $("#area-box").show();
                        app.edit.data.area_id = 0;
                    }else{
                        app.form.changeData(app.area);
                    }
                    app.form.render();
                });

                form.on('select(area)', function (data) {
                    if(data.value == ""){
                        app.edit.data.area_id = 0;
                        return false;
                    }else{
                        app.form.changeData(app.area.data[data.value]);
                    }
                    app.edit.data.area_id = $(data.elem).find("option[value='"+data.value+"']").attr('data-id');
                    app.form.render();
                });

                form.on('select(level)',function(data){
                    app.edit.data.level = data.value;
                });

                form.on('switch(is_hot)', function (data) {
                    app.edit.data.is_hot=data.elem.checked ? 1 : 0;
                });

                form.on('submit(*)', function (data) {
                    if(app.edit.data.area_id == 0){
                        layer.msg("请选择地区!", {icon: 5});
                        return false;
                    }
                    if(app.edit.data.level == 0){
                        layer.msg("请选择类型!", {icon: 5});
                        return false;
                    }
                    app.edit.data.serial_number = data.field.serial_number;
                    app.edit.data.name = data.field.name;
                    app.edit.data.code = data.field.code;
                    app.edit.data.full_name = data.field.full_name;
                    app.edit.data.full_pinyin = data.field.full_pinyin;
                    app.edit.data.short_pinyin = data.field.short_pinyin;
                    app.edit.data.firstchar = data.field.firstchar;
                    app.save();
                    return false;
                });

                this.obj = form;
            },
            render: function () {
                this.obj.render();
            },
            changeData:function(data){
                $("#name").val(data.short_name);
                $("#serial_number").val(data.serial_number);
                $("#code").val(data.serial_number);
                $("#full_name").val(data.name);
                $("#full_pinyin").val(data.pinyin);
                $("#short_pinyin").val(data.short_pinyin);
                $("#firstchar").val(data.firstchar);
                $("#level").val(data.level);
                app.edit.data.parentpath = data.parentpath;
                app.edit.data.province = data.province;
                app.edit.data.city = data.city;
                app.edit.data.level = data.level;
            }
        },
        save:function () {
            $.post(baseUrl+'&action=save',this.edit.data,function (d) {
                if(d.flag)
                {
                    layer.closeAll();
                    layer.msg(d.msg);
                    $('#data-list').table();
                }else{
                    layer.msg(d.msg);
                }
            },'json')
        },
        del:function (id) {
            layer.msg("确定删除该开通的城市吗？", {
                time: false, //20s后自动关闭
                btn: ['确定', '取消'],
                yes:function () {
                    $.post(baseUrl+'&action=del',{id:id},function (d) {
                        layer.closeAll();
                        if(d.flag)
                        {
                            layer.msg('删除成功');
                            $('#data-list').table();
                        }else{
                            layer.msg(d.msg);
                        }
                    },'json')
                }
            });

        }
    };

    app.init();
</script>